<template>
  <div>
    <el-menu
      :default-active="$store.state.currentActiveIndex || activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      :router="true"
    >
      <el-menu-item :index="item.path" v-for="(item,index) in navs" :key="index">
        <!-- <img v-if='item==(this.$store.state.currentActiveIndex || activeIndex)' src="" /> -->
        <span v-if="item.path==($store.state.currentActiveIndex || activeIndex)">
          <img src="../home/navelogo.png" class="navelogo" />
        </span>
        <span v-else>{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "/",
      navs: [
        {
          name: "首页",
          path: "/"
        },
        {
          name: "小程序",
          path: "/main"
        },
        {
          name: "营销",
          path: "/Marketing"
        },
        {
          name: "案例",
          path: "/demo"
        },
        {
          name: "盟载",
          path: "/m"
        },
        {
          name: "观点",
          path: "/point"
        }
      ]
    };
  },
  methods: {
    handleSelect(key, keypath) {
      this.activeIndex = key;
      this.$store.commit('changeActiveIndex','')
    }
  }
};
</script>
<style >
  .logimg{
    width: 108px;
    height: 50px;
    margin-left: 70px;
  }
  .navelogo{
    height: 37px;
  }
  .phone-wrapper{
    margin-top: 0px;

  }
  .phone-text{
    margin-right: 10px;
  }
  .search{
    display: inline-block;
    margin-bottom: 0;
    background-color: #008ad5;
    width: 80px;
    height: 60px;
  }
  .search-img{
    margin: 17px 30px 0px 30px;
  }
</style>